<template>
  <view class="content">
    <view class="header">
      <image src="../../static/login/logo.png"></image>
    </view>

    <view class="list">
      <view class="list-call">
        <image class="img" src="/static/login/1.png"></image>
        <input class="sl-input" v-model="data.phone" type="number" maxlength="11" placeholder="手机号" @focus="focusInput" @blur="blurInput"/>
      </view>
      <view class="list-call">
        <image class="img" src="/static/login/2.png"></image>
        <input class="sl-input" v-model="data.password" type="text" maxlength="16" placeholder="登录密码" :password="!showPassword" @focus="focusInput" @blur="blurInput"/>
        <image class="img" :src="showPassword ? '/static/login/op.png' : '/static/login/cl.png'" @tap="togglePasswordVisibility"></image>
      </view>
      <view class="list-call">
        <image class="img" src="/static/login/3.png"></image>
        <input class="sl-input" v-model="data.verifyCode" type="number" maxlength="6" placeholder="验证码" @focus="focusInput" @blur="blurInput"/>
        <view class="yzm" :class="{ yzms: second > 0 }" @tap="getCode">{{ verificationText }}</view>
      </view>
    </view>

    <view class="button-login" hover-class="button-hover" @tap="handleRegister">
      <text>注册</text>
    </view>
  </view>
</template>

<script setup>
// 引入所需的 Vue 组合式 API 函数
import { ref, computed, onUnmounted } from 'vue';
import { ApiRegister,ApiGetSSMCode } from '../api/user';

//定义数据
const data = ref({
	phone:"",
	password:"",
	verifyCode:""
})
// 定义响应式变量，用于控制是否显示密码
const showPassword = ref(false);
// 定义响应式变量，用于显示倒计时（验证码相关）
const second = ref(0);
// 定义变量，用于存储定时器对象，以便后续清除定时器
let interval = null;

// 计算属性，用于动态生成验证码按钮的文本内容
const verificationText = computed(() => {
  if (second.value === 0) {
    return '获取验证码';
  } else {
    return second.value < 10 ? `重新获取0${second.value}` : `重新获取${second.value}`;
  }
});

// 切换密码显示状态的函数
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

// 获取验证码的函数
const getCode = async() => {
  // 验证手机号是否合法（长度为11位）
  if (data.value.phone.length !== 11) {
    uni.showToast({
      icon: 'none',
      title: '手机号不正确'
    });
    return;
  }
  
  // 如果正在倒计时中，则不执行任何操作
  if (second.value > 0) return;

  // 设置倒计时为60秒
  second.value = 60;
  
  // 每秒更新倒计时
  interval = setInterval(() => {
    second.value--;
    if (second.value === 0) {
      // 当倒计时结束时，清除定时器
      clearInterval(interval);
      interval = null;
    }
  }, 1000);
  await ApiGetSSMCode(data.value.phone)
};

// 处理注册的函数
const handleRegister = async() => {
  // 验证手机号是否合法（长度为11位）
  if (!/^1[3-9]\d{9}$/.test(data.value.phone)) {
    uni.showToast({
      icon: 'none',
      title: '手机号格式不正确'
    });
    return;
  }
  
  // 验证密码是否符合要求（8-16位，且包含数字和字母的组合）
  if (!validatePassword()) {
    uni.showToast({
      icon: 'none',
      title: '密码必须为8-16位，且包含数字和字母的组合'
    });
    return;
  }
  
  // 验证验证码是否合法（长度为6位）
  if (data.value.verifyCode.length !== 6) {
    uni.showToast({
      icon: 'none',
      title: '验证码不正确'
    });
    return;
  }
  
  //发起请求进行注册
  await ApiRegister(data.value);
  
  uni.showToast({
    title: '注册成功',
    icon: 'none'
  });
  
  // 1.5秒后返回上一页
  setTimeout(() => {
    uni.navigateBack();
  }, 1000);
};

// 验证密码的函数
const validatePassword = () => {
  // 正则表达式，确保密码长度为8-16位，并且包含数字和字母
  const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;
  return passwordRegex.test(data.value.password);
};

// 输入框聚焦时的处理函数
const focusInput = (e) => {
  if (e.target && e.target.parentElement) {
    e.target.parentElement.style.transform = 'translateY(-2px) scale(1.02)';
    e.target.parentElement.style.transition = 'transform 0.3s';
    e.target.parentElement.style.borderBottomColor = '#37a8ff';
  }
};

// 输入框失去焦点时的处理函数
const blurInput = (e) => {
  if (e.target && e.target.parentElement) {
    if (!e.target.value) {
      e.target.parentElement.style.transform = 'translateY(0) scale(1)';
      e.target.parentElement.style.transition = 'transform 0.3s';
      e.target.parentElement.style.borderBottomColor = '#e2e2e2';
    }
  }
};

// 在组件卸载时清除定时器，以避免内存泄漏
onUnmounted(() => {
  if (interval) {
    clearInterval(interval);
    interval = null;
  }
});
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
}

.header {
  width: 161rpx;
  height: 161rpx;
  background: linear-gradient(135deg, #409eff, #67c23a);
  box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(63, 205, 235, 0.3);
  border-radius: 50%;
  margin-top: 30rpx;
  margin-left: auto;
  margin-right: auto;
  animation: float 3s ease-in-out infinite;
  overflow: hidden;
}

.header image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.list {
  display: flex;
  flex-direction: column;
  padding-top: 50rpx;
  padding-left: 70rpx;
  padding-right: 70rpx;
  transition: all 0.3s;
}

.list-call {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  color: #333333;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 0 20rpx;
  transition: all 0.3s;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
}

.list-call:hover {
  box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);
  transform: translateY(-2rpx);
}

.list-call .img {
  width: 40rpx;
  height: 40rpx;
  transition: transform 0.3s;
}

.list-call:hover .img {
  transform: scale(1.1);
}

.list-call .sl-input {
  flex: 1;
  text-align: left;
  font-size: 32rpx;
  margin-left: 16rpx;
  transition: all 0.3s;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 10rpx;
}

.yzm {
  color: #FF7D13;
  font-size: 24rpx;
  line-height: 64rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  width: auto;
  height: 64rpx;
  border: 1rpx solid #FFA800;
  border-radius: 50rpx;
  transition: all 0.3s;
  margin-left: 10rpx;
}

.yzm:hover {
  background-color: rgba(255, 173, 0, 0.1);
  transform: translateY(-2px);
}

.yzms {
  color: #999999 !important;
  border: 1rpx solid #999999;
}

.button-login {
  color: #FFFFFF;
  font-size: 34rpx;
  width: 470rpx;
  height: 100rpx;
  line-height: 100rpx;
  background: linear-gradient(135deg, #409eff, #67c23a);
  box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(63, 205, 235, 0.3);
  border-radius: 50rpx;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100rpx;
  transition: all 0.3s;
  transform: scale(1);
  cursor: pointer;
}

.button-login:active {
  transform: scale(0.98);
}

.button-hover {
  background: linear-gradient(135deg, #3a80ea, #52a030);
  transform: scale(1.02);
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.yzm {
  animation: pulse 2s infinite;
}
</style>